<template>
  <div>
    <div id="playform">
      <div class="playmain">
        <div class="play">
          <i class="el-icon-caret-left"></i>
          <i
            :class="flag ? 'icon-zanting' : 'el-icon-video-play'"
            @click="handleplay"
          ></i>
          <audio ref="audio" :src="songURL"></audio>
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="BAR">
          <div class="mask"></div>
          <div class="block">
            <div>
              <span class="demonstration">风的季节</span>
              <el-slider v-model="value2"></el-slider>
            </div>

            <div class="time"><span>00:00/00:00</span></div>
          </div>
        </div>
        <div class="open-fl">
          <i class="el-icon-document-copy"></i>
          <i class="el-icon-folder-add"></i>
          <i class="el-icon-edit"></i>
        </div>
        <div class="ctrl-fl">
          <i class="el-icon-s-tools"></i>
          <i class="el-icon-refresh"></i>
          <i class="el-icon-notebook-2"></i>
        </div>
      </div>
    </div>
    <div id="playfrom-right"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'PlaySong',
  data() {
    return {
      flag: false,
      songIds: 1483302307
    }
  },
  methods: {
    ...mapActions('singleplay', ['getSongURL']),
    handleplay() {
      if (this.flag) {
        this.flag = false
      } else {
        this.flag = true
      }
    }
  },
  watch: {
    flag() {
      if (this.flag) {
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    },
    songId() {
      this.songIds = this.songId
      console.log(this.songIds)
      this.getSongURL({ ids: this.songIds })
    }
  },
  computed: {
    ...mapState({
      songId: (state) => state.singleplay.songId,
      songURL: (state) => state.singleplay.songURL
    })
  },
  mounted() {}
}
</script>

<style>
#playform {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 53px;
  z-index: 15;
  background-color: #2e2f31;
}
#playform .playmain {
  display: flex;
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 15;
  width: 980px;
  height: 47px;
  margin: 0 auto;
  margin-left: -490px;
}
#playform .playmain .play {
  width: 137px;
  height: 42px;
  padding: 6px 0 0 0;
}
#playform .playmain .play i {
  /* position: absolute; */
  /* display: inline-block; */
  width: 28px;
  height: 28px;
  color: white;
  font-size: 36px;
  margin-right: 10px;
  /* z-index: 20; */
}
.BAR {
  display: flex;
  width: 630px;
  height: 47px;
}
.mask {
  width: 34px;
  height: 35px;
}
.block {
  display: flex;
}
#playform .playmain .BAR .block .time span {
  display: inline-block;
  font-size: 12px;
  color: white;
  margin-top: 26px;
  margin-left: 5px;
}
.block span.demonstration {
  display: inline-block;
  font-size: 12px;
  color: white;
  margin-left: 20px;
}
.block div.el-slider {
  width: 466px;
  height: 9px;
  margin-left: 20px;
}
.open-fl {
  display: flex;
  width: 87px;
  height: 47px;
  align-items: center;
  justify-content: center;
}
.open-fl i {
  width: 25px;
  height: 25px;
  color: white;
  font-size: 20px;
}
.open-fl i.el-icon-edit {
  border-right: 1px solid #333333;
  padding-right: 10px;
}

.ctrl-fl {
  display: flex;
  width: 87px;
  height: 47px;
  align-items: center;
  justify-content: center;
}
.ctrl-fl i {
  width: 25px;
  height: 25px;
  color: white;
  font-size: 20px;
}
.ctrl-fl i.el-icon-s-tools {
  border-left: 1px solid #333333;
  padding-left: 10px;
}
.icon-zanting {
  height: 37px;
  width: 36px;
}
</style>
